import Vue from "vue"
import Vuex from "vuex"

import {INCREMENT} from "./mutations_type"
// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const moduleA = {
    state:{
        name:'zhangsan'
    },
    mutations:{
        updataName(state,payload){
            // state.name = "lisi" 
            state.name = payload  
        }
    },
    actions:{
       aUpdateName(context){
          window.console.log(context);
           setTimeout(()=>{
            context.commit('updataName','wangwu')
           },1000)
      
       }
    },
    getters:{
        fullname(state){
            return state.name + "1111"
        },
        fullname2(state,getters){
            return getters.fullname + "222"
        },
        fullname3(state,getters,rootState){
            return getters.fullname2 + rootState.counter
        }
    }
}
const store = new Vuex.Store({
    // 保存状态的
    // state单一状态树
    // 只有提前加入响应式系统的才会响应式
    state:{
        counter:1000,
        students:[
            {id:110,name:'why1',age:18},
            {id:111,name:'why2',age:24},
            {id:112,name:'why3',age:30},
            {id:113,name:'why4',age:10}
        ],
        info:{
            name:'kobe',
            age:40,
            height:1.98
        }
    },
    // 状态更新
    mutations:{
        // 定义方法
        [INCREMENT](state){
            state.counter++
        },
        // increment(state){
        //     state.counter++
        // },
        decrement(state){
            state.counter--
        },
        incrementCount(state,payload){
            window.console.log(payload)
            state.counter += payload.count   
        },
        addStudent(state,stu){
            state.students.push(stu)
        },
        updateInfo(state) {
            state.info.name = "coderwhy"

            // 错误代码不能在这里进行异步操作
            // setTimeout(() =>{
            //     state.info.name = "coderwhy"
            // })
            // state.info['address']= "beijing"
        // 可以添加到响应式系统
            // Vue.set(state.info,'address',"北京")
            // 该方式也不能做到响应式
            // delete state.info.age
            // 可以响应式  删除
            // Vue.delete(state.info,'age')
        }
    },
    // 异步操作
    actions:{
        // context  上下文
        // aUpdateInfo(context,payload){
        //     setTimeout(() =>{
        //         context.commit('updateInfo')
        //         // payload()

        //        window.console.log(payload.message);
        //         //回调
        //         payload.success();
        //         // console.log(payload);
        //     },1000)
        // }

// 上面的不够优雅
        // aUpdateInfo(context,payload){
        //   return new Promise((resolve,reject) =>{
        //     setTimeout(() =>{
        //         context.commit('updateInfo')
        //         window.console.log(payload);
        //         resolve('1111')
        //     },1000)
        //   })
        // }
    },
    // 类似于vue的计算属性
    getters:{
        powerCounter(state){
            return state.counter*state.counter
        },
        more20stu(state) {
            return state.students.filter(s => s.age > 20)
        },
        more20stuLength(state,getters) {
            return getters.more20stu.length
        },
        moreAgestu(state){
            // return function(age){
            //     return state.students.filter(s =>s.age >age)
            // }

            return age => {
                return state.students.filter(s =>s.age > age)
            }
        }

    },
    // 划分模块
    modules:{
        a:moduleA,
        B:{},
        C:{}
    }
})

// 3.导出store对象
export default store

// 对象的解构
// const obj = {
//     name:'why',
//     age:18,
//     height:1.88
// }
// // 顺利不影响
// const {name,age,height} = obj
// console.log(obj.name)